<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="flexible" content="initial-dpr=2" />
    <title>报价</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/quote.css">
    <link rel="stylesheet" href="css/fabiao_select.css">
    <link rel="stylesheet" href="src/layer.css" id="layui_layer_skinlayercss" style="">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script type="text/javascript" src="src/js/calculate.js"></script>
    <!--   <script src="js/quote.js"></script>-->
</head>
<body>
<img src="img/new.png" alt="" class="headlog">
<div class="content">
    <!--<div class="top">
        <img src="img/logo.png" alt="">
    </div>
    <p class="green">10秒估算装修报价</p>
    <p class="ton">统统免费规避价格陷进，立省半年工资</p>-->
    <div action="">
        <div class="forms">
            <div class="shown">
                <div class="rax">
                    <div  type="text"  disabled="true" class="test val" />
                        <img src="img/radom.gif" alt="" class="radomg">
                        <!--<p id="test"></p>-->
                    </div>
                </div>
            </div>
            <div class="cost">
                <ul>
                    <li>
                            <span>
                                <em>人工费：</em>
                                ？元
                            </span>
                            <span>
                                <em>材料费：</em>
                                ？元
                            </span>
                    </li>
                    <li>
                             <span>
                                <em>设计费：</em>
                                ？元
                            </span>
                            <span>
                                <em>质检费：</em>
                                ？元
                            </span>
                    </li>
                </ul>
            </div>
            <div class="choose">
                <form action="" id="baojia" onsubmit="calculateTG(&#39;#baojia&#39;)">
                    <ul>
                        <li >
                            <input name="city" type="text" placeholder="请输入你所在的城市" readonly data-id="city" id="area" value="">
                            <span class="icon icri"></span>
                        </li>
                        <li>
                            <input type="number" placeholder="请输入你房屋的面积" name="mianji" id="mianji" class="acreage" value="">
                            <span class="icon">㎡</span>
                        </li>
                        <li class="rooms">
                            <input type="text" name="hxxq[]" value="2室1厅" class="room">
                           <!-- <div>
                                <span class="shi showa" id="testshi" data-name="">2室</span>
                                <span class="ting showa" id="testting">1厅</span>
                                <span class="wei showa" id="testwei">2卫</span>
                                <span class="yang showa" id="testyangtai">1阳台</span>
                            </div>-->
                            <!-- <input type="text" placeholder="请选择房屋类型" readonly>-->
                            <span class="icon icri"></span>
                        </li>
                        <li class="choclick" style="background: white">
                            <span class="decoration-type newHouse">新房装修</span>
                            <span class="decoration-type oldHouse selected">旧房翻新</span>
                        </li>
                        <li >
                            <input type="number" placeholder="请输入手机号以获取短信结果" value="" class="teleph" name="phone" id="phone" maxlength="11" >
                        </li>
                        <button class="reseive" id="calForm-btn">免费获取装修报修</button>
                        <p class="last">已有 <span class="people">30</span>人成功获取报价 </p>
                    </ul>
                </form>
            </div>
    </div>
</div>
</body>
<div class="layer-huxing">
    <div class="layer-content">
        <span class="column">选择你家的户型</span>
        <i class="cut-line"></i>
        <div class="huxing-option">
            <ul class="option0">
                <li class="on">1室</li>
                <li class="">2室</li>
                <li>3室</li>
                <li>4室</li>
                <li>5室</li>
            </ul>
            <ul class="option1">
                <li class="">1厅</li>
                <li class="on">2厅</li>
                <li>3厅</li>
                <li>4厅</li>
                <li>5厅</li>
            </ul>
            <ul class="option2">
                <li class="on">1卫</li>
                <li>2卫</li>
                <li>3卫</li>
                <li>4卫</li>
                <li>5卫</li>
            </ul>
            <ul class="option3">
                <li class="on">1阳台</li>
                <li>2阳台</li>
                <li>3阳台</li>
                <li>4阳台</li>
                <li>5阳台</li>
            </ul>
        </div>
        <input type="button" value="确定" id="confirm" >
    </div>
</div>
<div class="citys">
     <ul class="provices same">
         <!--<li>-->
             <!--<span data-prefix="">A</span>-->
             <!--<span data-prid="">安徽</span>-->
         <!--</li>-->
         <!--<li>-->
             <!--<span>B</span>-->
             <!--<span>北京</span>-->
         <!--</li>-->

     </ul>
    <ul class="city same">
        <!--<ul class="zi">-->
            <!--<li data-cid="" >合肥市</li>-->
            <!--<li>阜阳</li>-->
            <!--<li>芜湖</li>-->
        <!--</ul>-->
        <!--<ul class="zi" style="display: none">-->
            <!--<li>北京市</li>-->
        <!--</ul>-->
    </ul>
</div>
<div class="mask"></div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="http://static.xtuan.com/?controller=jsinfo/location"></script>
<script src="js/fabiao_select.js"></script>
<script type="text/javascript" src="src/js/layer.js"></script>
<script src="js/common_cityFromIp.js"></script>
<!--<script src="js/fabiaoEndalertNew.js"></script>-->
<script type="text/javascript">
    window.onload = set_time();
    var x = 1557331;
    var y = 5;
    function set_time() {
        setTimeout(function() {
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            $("#test").html("").append("<div>" + rand + "</div>");
            set_time();
        },200)
    };
    /*校验电话码格式 */
    function isTelCode(str) {
        var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
        return reg.test(str);
    }
    function  fun1(){
        if(!isTelCode(document.getElementById("phone").value)){
            layer.msg("电话号码不对");
            document.getElementById("phone").focus();
            return false;
        }
    }
    $(function () {

        //FabiaoSelect.initialize({targetDom: '#area'});
        /* var search = parseQuery();*/

        $('.decoration-type').on('click',function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            $(this).css('border-color','#34c083').siblings().css('border-color','black');
            var rommclass =$('.decoration-type.selected').text();
            console.log(rommclass)
        })

        var that = $("#area")
        $("#area").click(function(e){
            $('.citys').fadeIn()
            $('.mask').fadeIn()
        })
        $(".mask").click(function(){
            $('.citys').fadeOut()
            $('.mask').fadeOut()
        })
        //自定义城市选择

        var citys=location_data;
        console.log(citys)
        for(var i in citys){
            var plist=("" +
                "<li data-arr=" +'k'+citys[i]["areaID"]+" data-index='index'>" +
                "<span data-prefix=''> "+citys[i]['prefix']+"  </span> " +
                "<span data-prid=" +citys[i]["areaID"]+ "> "+citys[i]['areaName']+"</span> " +
                "</li>")

            var child_data = citys[i]['child'];
            /*var first =citys.k340000.child
            var clist =''
            clist=("<ul class='zi'>" +
                "<li data-cid="+['areaID']+" > "+child_data[k]['areaName']+" </li>" +
                "</ul>")
            //console.log(clist)
            $('.city').append(clist)*/
            // for(var k in child_data){
            //     clist=("<ul class='zi'>" +
            //         "<li data-cid="+child_data[k]['areaID']+" > "+child_data[k]['areaName']+" </li>" +
            //         "</ul>")
            //     //console.log(clist)
            //     $('.city').append(clist)
            // }
            $('.provices').append(plist)
        }
        var first =citys.k340000.child
        console.log(first)
        for(var i in first){
            clist=("<ul class='zi'>" +
                "<li data-cid="+first[i]['areaID']+" > "+first[i]['areaName']+" </li>" +
                "</ul>")
            //console.log(clist)
            $('.city').append(clist)
        }
        //省点击事件
        $('.provices').on("click","li",function (e) {
            $('.zi').html('')
            var sk =e.currentTarget.dataset.arr
            //console.log(sk)
            var s= parseInt($(this).index());
            $('.provices li').css('background','white');
            $(".provices li span").css('color','black');
            $(this).children('span').css('color','#34c083');
            $(this).css('background','#f8f8f8');
            $(this).parent().next().find(".zi").hide().eq(s).show();
            //console.log(s)
            var ty= citys[sk]
            var child_data =ty.child
            if(child_data.length==0){
                var city=citys[sk]['areaName']
                clist=("<ul class='zi'>" +
                    "<li data-cid="+ty['areaID']+" > "+city+" </li>" +
                    "</ul>")
                $('.city').append(clist)
            }else{
                for(var i in child_data){
                    clist=("<ul class='zi'>" +
                        "<li data-cid="+child_data[i]['areaID']+" > "+child_data[i]['areaName']+" </li>" +
                        "</ul>")
                    //console.log(clist)
                    $('.city').append(clist)
                }
            }
            //console.log(citys[sk].child)
            //console.log(citys.k340000.child)
        })

        //市点击事件
        $('.city').on('click',".zi li",function (e) {
            $(".zi li ").css('color','black');
            $(this).css('color','#34c083');
            var city =$(this).html()
            $("#area").val(city)
            $('.citys').fadeOut()
            $('.mask').fadeOut()
            cid=e.currentTarget.dataset.cid
            that[0].dataset.id=cid
            //console.log(that[0].dataset.id)
        })





        //$('.provices').append(plist)
        //$('.city').append(plist)
        $(".rooms").on('click',function(){
            $(".layer-huxing").show();
            console.log(city)
            console.log('23213',$("#area").val())
        })

        //几室几厅选择
        $(".huxing-option ul li").click(function(){
            $(this).addClass('on').siblings().removeClass('on');
        })

        var city =$("#area").val();

        var acreage =$('.acreage').val();
        var shi =$(".huxing-option .option0 .on").text();
        var ting = $(".huxing-option .option1 .on").text();
        var wei = $(".huxing-option .option2 .on").text();
        var yang = $(".huxing-option .option3 .on").text();
        $(".room").val(shi+ting+wei+yang)
        $('.shi').text(shi);
        $('.ting').text(ting);
        $('.wei').text(wei);
        $('.yang').text(yang)



        $(".huxing-option .option0 li").click(function(){
            var shi =$(this).text();
            $('.shi').text(shi)
            $('#confirm').click(function(){
                $(".layer-huxing").hide()
            })
            $(".room").val(shi+ting+wei+yang)
        })
        $(".huxing-option .option1 li").click(function(){
            var ting =$(this).text();
            $('.ting').text(ting)
            $('#confirm').click(function(){
                $(".layer-huxing").hide()
            })
            $(".room").val(shi+ting+wei+yang)
        })
        $(".huxing-option .option2 li").click(function(){
            var wei =$(this).text();
            $('.wei').text(wei)
            $('#confirm').click(function(){
                $(".layer-huxing").hide()
            })
            $(".room").val(shi+ting+wei+yang)
        })
        $(".huxing-option .option3 li").click(function(){
            var yang =$(this).text();
            $('.yang').text(yang)
            $('#confirm').click(function(){
                $(".layer-huxing").hide()
            })
            $(".room").val(shi+ting+wei+yang)
        })

        $('#confirm').click(function(){
            $(".layer-huxing").hide()
            console.log(city)
        })
        //非空验证
        $('.reseive').click(function () {
            console.log(acreage)

            if($("#area").val() ==''){
                layer.msg('城市不能为空')
                return false
            }
            if($('.acreage').val() ==''){
                layer.msg('面积输入不能为空')
                return false
            }
            if($('.rooms span').text() ==''){
                layer.msg('房子类型不能为空')
                return false
            }
            if($('.teleph').val() ==''){
                layer.msg('电话号码不能为空')
                return false
            }
            else{
                window.location.href='result.html';
                return true
            }
        })


    })



</script>
</html>